<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <link rel="stylesheet" href="../bootstrap-4.6.1-dist/css/bootstrap.min.css">
    <style>
        .btn-circle {
            width: 30px;
            height: 30px;
            text-align: center;
            padding: 6px 0;
            font-size: 12px;
            margin-left: 10px;
            line-height: 1.428571429;
            border-radius: 15px;
            background-color: white;
        }
    </style>
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-secondary justify-content-between">
            <div class="container">
                <a class="navbar-brand text-white" href="/">诗词大王</a>
                <button class="navbar-toggler bg-white" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item">
                            <a id="a1" class="nav-link text-white" href="../index.html">首页</a>
                        </li>
                        <li class="nav-item">
                            <a id="a2" class="nav-link text-white" href="../AllPoems.html">古诗</a>
                        </li>
                        <li class="nav-item">
                            <a id="a3" class="nav-link text-white" href="../famousSentence.html">名句</a>
                        </li>
                        <li class="nav-item">
                            <a id="a4" class="nav-link text-white" href="../allAuthor.html">诗人</a>
                        </li>
                        <li class="nav-item">
                            <a id="a5" class="nav-link text-white" href="../ancientBook.html">古籍</a>
                        </li>
                        <li class="nav-item">
                            <a id="a6" class="nav-link text-white" href="../history.html">历史</a>
                        </li>
                        <li class="nav-item">
                            <a id="a7" class="nav-link text-white" href="../knowledge.html" >知识</a>
                        </li>
                        <li class="nav-item">
                            <a id="a8" class="nav-link text-white" href="../idiom.html">成语</a>
                        </li>
                    </ul>
                    <form class="form-inline my-2 my-lg-0">
                        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-light my-2 my-sm-0" type="button" onclick="btn()">搜索</button>
                    </form>
                </div>
                <button type="button" class="btn btn-default btn-circle"><a href="../login.html">管理</a></button>
            </div>

        </nav>
    </header>
</body>
<script>
    function btn() {
        alert("该功能敬请期待！！")
    }
</script>
</html>